//
// Buttons
// --------------------------------------------------


@btn-height-base: @input-height-base - 2;
@btn-height-small: @btn-height-base - 6;
@btn-height-large: @btn-height-base + 8;
@btn-padding-horizontal-base: 12px;
@btn-padding-horizontal-small: 8px;
@btn-padding-horizontal-large: 18px;
@btn-bg-default: #f5f5f5;
@btn-border-color-default: #ccc;
@btn-border-color-disabled: #d9d9d9;
@btn-light-bg: #e0e1e2;


.button-size(@height; @padding-horizontal) {
    height: @height;
    padding: (@height - 2 - @font-size-base * @line-height-base) / 2 @padding-horizontal;
}

.icon-button-size(@height) {
    width: @height;
    height: @height;
    padding: (@height - (@font-size-base + 2) * @line-height-base) / 2 0;
    text-align: center;
    border-radius: 50%;

    i {
        font-size: @font-size-base + 2;
    }
}

.btn(@bg-color) {
    background-color: @bg-color;
    color: #fff;
    font-weight: 400;
    border-color: @bg-color; 

    &:hover,
    &:active,
    &:focus {
        background-color: darken(@bg-color, 10%);
        color: #fff;
        border-color: darken(@bg-color, 10%);
    }

    &:active {
        box-shadow: 0 0 0 2px fade(@bg-color, 20%);
    }
}

.btn-outline(@border-color, @color, @hover-bg) {
    background-color: transparent;
    color: @color;
    border-color: @border-color;

    &:hover,
    &:active,
    &:focus {
        background-color: @hover-bg;
    }

    &:active {
        box-shadow: 0 0 0 2px fade(@border-color, 20%);
    }
}

.btn,
.btn-outline,
.btn-light {
    position: relative;
    display: inline-block;
    line-height: @line-height-base;
    text-align: center;
    white-space: nowrap;
    font-size: @font-size-base;
    border: 1px solid transparent;
    border-radius: @border-radius-base;
    cursor: pointer;
    transition: background-color .4s, border-color .4s, color .3s, box-shadow .1s;
    .user-select(none);

    &:hover,
    &:active,
    &:focus {
        outline: 0;
        text-decoration: none;
    }

    &.round {
        border-radius: @input-round-radius;
    }

    &.shadow {
        box-shadow: @input-shadow;
    }

    &.loading {
        pointer-events: none;

        &:before {
            position: absolute;
            display: block;
            top: -1px;
            left: -1px;
            bottom: -1px;
            right: -1px;
            background: #fff;
            opacity: .35;
            content: "";
            border-radius: inherit;
            z-index: 1;
            transition: opacity .2s;
            pointer-events: none;
        }
    }
}

.btn.btn-primary {
    .btn(@primary-color);
}

.btn.btn-default {
    background-color: @btn-bg-default;
    color: @text-color-base;
    border-color: @btn-border-color-default;

    &:hover,
    &:active,
    &:focus {
        background-color: darken(@btn-bg-default, 6%);
    }

    &:active {
        box-shadow: 0 0 0 2px fade(#aaa, 20%);
    }

    i {
        color: @icon-color-default;
    }
}

.btn.btn-success {
    .btn(@color-success);
}

.btn.btn-danger {
    .btn(@color-danger);
}

.btn.btn-inverted {
    background-color: #fff;
    color: @text-color-base;
    border-color: #fff;

    i {
        color: @icon-color-default;
    }
}

.btn-outline.btn-primary {
    .btn-outline(@primary-color, @primary-color, fade(@primary-color, 8%));
}

.btn-outline.btn-default {
    .btn-outline(@btn-border-color-default, @text-color-base, @btn-bg-default);

    i {
        color: @icon-color-default;
    }
}

.btn-outline.btn-success {
    // .btn-outline(@color-success, @color-success, #efffef);
    .btn-outline(@color-success, @color-success, fade(@color-success, 8%));
}

.btn-outline.btn-danger {
    // .btn-outline(@color-danger, @color-danger, #fdf7f7);
    .btn-outline(@color-danger, @color-danger, fade(@color-danger, 8%));
}

.btn-outline.btn-inverted {
    background-color: transparent;
    color: #fff;
    border-color: #fff;

    &:hover,
    &:active,
    &:focus {
        background-color: #fff;
        color: @text-color-base;

        i {
            color: @icon-color-default;
        }
    }
}

.btn-light {
    background-color: transparent;

    &:hover,
    &:active,
    &:focus {
        background-color: @btn-light-bg;
        border-color: @btn-light-bg;
    }

    &:active {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
}

.btn-light.btn-primary {
    color: @primary-color;
}

.btn-light.btn-default {
    color: @text-color-base;

    i {
        color: @icon-color-default;
    }
}

.btn-light.btn-success {
    color: @color-success;
}

.btn-light.btn-danger {
    color: @color-danger;
}

.btn-light.btn-inverted {
    color: #fff;

    &:hover,
    &:active,
    &:focus {
        background-color: #fff;
        color: @text-color-base;
        border-color: #fff;
        box-shadow: none;

        i {
            color: @icon-color-default;
        }
    }
}

.btn-small {
    .button-size(@btn-height-small; @btn-padding-horizontal-small);
    font-size: @font-size-base - 1;
}

.btn-medium {
    .button-size(@btn-height-base; @btn-padding-horizontal-base);
}

.btn-large {
    .button-size(@btn-height-large; @btn-padding-horizontal-large);
}

.btn-icon.btn-small {
    .icon-button-size(@btn-height-small);
}

.btn-icon.btn-medium {
    .icon-button-size(@btn-height-base);
}

.btn-icon.btn-large {
    .icon-button-size(@btn-height-large);
}

.btn[disabled],
.btn:disabled,
.btn.disabled {
    pointer-events: none;
    background-color: @bg-disabled !important;
    color: @text-color-disabled !important;
    border-color: @btn-border-color-disabled;
    cursor: default;
}

.btn-outline[disabled],
.btn-outline:disabled,
.btn-outline.disabled {
    pointer-events: none;
    color: @text-color-disabled !important;
    border-color: @btn-border-color-disabled;
    cursor: default;
}

.btn-light[disabled],
.btn-light:disabled,
.btn-light.disabled {
    pointer-events: none;
    background-color: transparent !important;
    color: @text-color-disabled !important;
    cursor: default;
}

.btn-block {
    display: block;
}

.btn-group {
    position: relative;
    display: inline-block;
    font-size: 0;   // prevent ghost margin

    > .btn,
    > .btn-outline {
        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:not(:last-child) {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
              
        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
    }
}